// Style for the loader and thinking elements

.loading-content, .thinking-content {
	position:fixed;
	top:0;
	left:0;
	z-index: 20;
	width:100%;
	height:100%;
	background: fade(@color-bg-page, 50);
}

.loading-spinner {
	text-align: center;
	width: 100%;
	position: relative;
	top: 50%;
	left: 0;
    user-select: none;
}

.loading-spinner .loading-dot {
	background: @color-bg-contrast;
	width: 11px;
	height: 11px;
	margin: 2px;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.3s infinite ease-in-out both;
	animation: sk-bouncedelay 1.3s infinite ease-in-out both;
    user-select: none;
}

.loading-spinner .loading-dot1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.loading-spinner .loading-dot2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

.loading-spinner .loading-dot3 {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% {
	-webkit-transform: scale(0);
	transform: scale(0);
	} 40% {
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
	}
}

// transition overlay (when switching between dark/light theme)

#theme-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    background: #8E8F8E;
	transition: opacity 0s;
	opacity: 0;
}
